<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录页面</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link id="theme-style" rel="stylesheet" href="/myplugs/css/portal.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body class="app app-login p-0">
<div class="row g-0 app-auth-wrapper">
    <div class="col-12 col-md-7 col-lg-6 auth-main-col text-center p-5">
        <div class="d-flex flex-column align-content-end">
            <div class="app-auth-body mx-auto">
                <div class="app-auth-branding mb-4"><a class="app-logo">
                    <img class="logo-icon me-2" src="/images/logo_2.png" alt="logo"></a></div>
                <h2 class="auth-heading text-center mb-5" style="color: #15a362;">登录后台管理系统</h2>
                <div class="auth-form-container text-start">
                    <div id="signon">

                        <form class="auth-form login-form" action="/index" method="post" id="login">

                            <div th:if="${session.signOnMsg}!=null">
                                <p id="signOnMsg" th:text="${session.signOnMsg}" style="color: red;text-align: center;"></p>
                            </div>

                            <input type="text" id="loginMethod" name="loginMethod" th:value="${session.loginMethod}"
                                   style="display: none">

                            <div class="app-card-footer p-2 mt-auto">
                                <button type="button" name="username-password" id="username-password" value="账号密码登录"
                                        class="btn app-btn-secondary">账号密码登录
                                </button>
                                <button type="button" name="mobile-verification-code" id="mobile-verification-code"
                                        value="手机验证码登录" class="btn app-btn-secondary">手机验证码登录
                                </button>
                            </div>

                            <div class="login1" style="text-align: center;">
                                <div class="email" style="margin-top: 20px;">
                                    <label class="sr-only" for="username"></label>
                                    <input type="text" id="username" name="username" class="form-control"
                                           placeholder="用户名" th:value="${session.tryUsername}">
                                    <div>
                                        <span id="msg1" style="color: red;"></span>
                                    </div>
                                </div><!--//form-group-->
                                <div class="password" style="margin-top: 20px;margin-bottom: 40px">
                                    <label class="sr-only" for="password"></label>
                                    <input id="password" name="password" type="password"
                                           class="form-control signin-password" placeholder="密码"
                                           th:value="${session.tryPassword}">
                                    <div>
                                        <span id="msg2" style="color: red;"></span>
                                    </div>
                                </div><!--//form-group-->
                            </div>

                            <div class="login2" style="text-align: center;">
                                <div class="email" style="margin-top: 20px;">
                                    <label class="sr-only" for="phone"></label>
                                    <input type="text" id="phone" name="phone" class="form-control" placeholder="手机号"
                                           th:value="${session.tryPhone}">
                                    <div>
                                        <span id="msg3" style="color: red;"></span>
                                    </div>
                                </div><!--//form-group-->
                                <div class="password" style="margin-top: 20px;margin-bottom: 40px">
                                    <label class="sr-only" for="code"></label>
                                    <input type="text" id="code" name="code" class="form-control signin-password"
                                           placeholder="验证码">
                                    <div>
                                        <span id="msg4" style="color: red;"></span>
                                    </div>
                                </div><!--//form-group-->
                            </div>

                            <div class="text-center row2">
                                <input type="submit" id="send" value="点击发送" formaction="/send"
                                       onclick="return CheckPhone();"
                                       class="btn app-btn-secondary w-75 theme-btn mx-auto"
                                       style="margin-bottom: 20px;">
                                <button type="submit" id="submit" class="btn app-btn-primary w-75 theme-btn mx-auto"
                                        onclick="return CheckPost();">登录
                                </button>
                            </div>
                        </form>
                    </div>
                </div><!--//auth-form-container-->
            </div><!--//auth-body-->
        </div><!--//flex-column-->
    </div><!--//auth-main-col-->

    <div class="col-12 col-md-5 col-lg-6 h-100 auth-background-col">
        <div class="auth-background-holder"></div>
        <div class="auth-background-mask"></div>
        <div class="auth-background-overlay p-3 p-lg-5">
            <div class="d-flex flex-column align-content-end h-100">
                <div class="h-100"></div>
                <div class="overlay-content p-3 p-lg-4 rounded">
                    <h5 class="mb-3 overlay-title">软件平台架构实验</h5>
                    <div>欢迎使用</div>
                    <div>该网站用于甜品商店后台管理</div>
                </div>
            </div>
        </div><!--//auth-background-overlay-->
    </div><!--//auth-background-col-->

</div><!--//row-->

<script>
    var loginMethod = $("#loginMethod").val();

    $(function () {
        console.log(loginMethod);
        loginChoose();

        Time();
    });

    function loginChoose() {
        if (loginMethod !== 2 && loginMethod !== '2') {
            $(".login2").hide();
            $("#send").hide();
            $(".login1").show();
        } else {
            $(".login1").hide();
            $(".login2").show();
            $("#send").show();
        }
    }

    $("#username-password").click(function () {
        loginMethod = 1;
        $("#loginMethod").val(loginMethod);
        loginChoose();
        console.log($("#loginMethod").val());
    });

    $("#mobile-verification-code").click(function () {
        loginMethod = 2;
        $("#loginMethod").val(loginMethod);
        loginChoose();
        console.log($("#loginMethod").val());
    });

    //检验是否输入
    function CheckPost() {
        console.log(loginMethod);
        if (loginMethod !== 2 && loginMethod !== '2') {
            console.log("账号密码方式登录");
            if (document.getElementById("username").value.trim().length === 0) {
                $("#msg1").html("账号不能为空");
                return false;
            }
            if (document.getElementById("password").value.trim().length === 0) {
                $("#msg2").html("密码不能为空");
                return false;
            }
        } else {
            console.log("验证码方式登录");
            if (document.getElementById("phone").value.trim().length === 0
                || document.getElementById("phone").value.trim().length !== 11) {
                $("#msg3").html("手机号码不正确");
                return false;
            }
            if (document.getElementById("code").value.trim().length !== 4) {
                $("#msg4").html("验证码输入有误");
                return false;
            }
        }
        return true;
    }

    //发送验证码
    function CheckPhone() {
        var phone = document.getElementById("phone").value.trim();
        if (phone.length !== 11) {
            $("#msg3").html("手机号码格式不正确");
            return false;
        } else {
            console.log("后台发送验证码");
            return true;
        }
    }

    function Time() {
        var signOnMsg = $("#signOnMsg").text();
        if (signOnMsg === "该手机号无管理员账号") {
            checkCode(2);
        } else if (signOnMsg === "验证码已发送") {
            checkCode(60);
        } else if (signOnMsg === "验证码发送失败，请稍后再试") {
            checkCode(2);
        }
    }

    function checkCode(time) {
        if (time == 0) {
            $("#send").removeAttr("disabled");//这个表示，从xx中移除yy属性，$(xx).remove()，移除xx元素
            $("#send").val("重新发送");
        } else {
            time--;
            $("#send").attr("disabled", true);
            $("#send").val("" + time + "s");
            setTimeout(function () {
                checkCode(time);
            }, 1000);
        }
    }

</script>
</body>
</html>

